<template>
    <div>
        <div class="searchForm">
            <div>
                商品串号： 
        		<el-input size="small" v-model="search_form.code" 
        		placeholder="请输入商品串号" 
				 @keyup.enter.native="searchCode"
				 clearable
        		style="width:200px;"></el-input>
            </div>
			<div>
			    <el-button type="primary" size="mini" @click="searchCode">检索</el-button>
			    <el-button size="mini" @click="clearSearch">重置/检索</el-button>
			</div>
			<div style="margin-top: 2px;margin-left: 10px;">
				<el-checkbox v-model="is_jc" border size="mini">寄存商品</el-checkbox>
			</div>
        </div>
        <br>
        <el-table stripe :data="list"  
			 border  
			>
			<!-- <el-table-column  label="序号" width="100"  align="center">
			     <template slot-scope="scope">
			         <div>
						 {{scope.$index+1}}
					 </div>
			     </template>
			 </el-table-column> -->
			 <el-table-column  align="center" width="120"  prop="buyer_date" label="制单日期" />
			<el-table-column  label="从"  width="150"  align="center">
			     <template slot-scope="scope">
			         <div>
						 {{returnFrom(scope.row)}}
					 </div>
			     </template>
			 </el-table-column>
			<el-table-column  label="到" width="120" align="center">
			     <template slot-scope="scope">
			         <div>
						 {{returnTo(scope.row)}}
					 </div>
			     </template>
			 </el-table-column>
			 <el-table-column  label="类型" width="100" align="center">
			      <template slot-scope="scope">
			          <el-tag size="small">
			 			 {{['采购退货','采购进货','批发','批发退货'][scope.row.type]}}
			 		 </el-tag>
			      </template>
			  </el-table-column>
			<el-table-column  align="center" width="120" prop="price" label="单价">
					<template slot-scope="scope">
					    <div v-if="scope.row.type==0 || scope.row.type==1">
							{{scope.row.price}}
						</div>
						<div v-if="scope.row.type==2 || scope.row.type==3">
							{{scope.row.sales_price}}
						</div>
					</template>
			</el-table-column>
			 <el-table-column  align="center" width="80"   label="单据号">
			 	<template slot-scope="scope">
			 	   <div>
						<div class="button_text" @click="toInfo(scope.row)">
							{{$utils.sliceStr(scope.row.order_number,6)}}
						</div>
			 	   </div>
			 	</template>
			 </el-table-column>
			<el-table-column align="center" width="260"   prop="goods_name" label="商品" />
			<el-table-column  align="center" width="180"  prop="add_time" label="发生日期" />
			<el-table-column  align="center" width="180"  prop="update_time" label="修改日期" />
			<el-table-column  align="center"   prop="update_person" label="修改人" />
			<el-table-column  align="center"   prop="remark" label="备注" />
        </el-table>
    </div>
</template>
<script>
    export default {
        components:{
			
        },
        data(){
            return {
				list:[],
				search_form:{
					code:""
				},
				is_jc:false
            }
        },
		watch:{
			is_jc:{
				handler(){
					this.search()
				}
			}
		},
        mounted(){
            document.title = '串号追踪'
        },
        methods:{
			returnFrom(row){
				/// 类型 0 退货 1 进货 2销售 3销售退货
				let type = row.type
				let str = ''
				if(type==0) str = '总仓'
				if(type==1) str = row.supplier
				if(type==2) str = '总仓'
				if(type==3) str = row.supplier
				
				if(this.is_jc){
					if(str=='总仓'){
						str = '寄存仓'
					}
				}
				
				return str
			},
			returnTo(row){
				let type = row.type
				let str = ''
				if(type==0) str = row.supplier
				if(type==1) str = '总仓'
				if(type==2) str = row.supplier
				if(type==3) str = '总仓'
				
				if(this.is_jc){
					if(str=='总仓'){
						str = '寄存仓'
					}
				}
				
				return str
			},
			clearSearch(){
				this.search_form.code = ''
				this.list = []
				// this.lodeList()
			},
			searchCode(){
				if(!this.search_form.code) return this.$message.error('请输入商品串号')
				this.search_form.code = this.$utils.filternusp(this.search_form.code)
				this.lodeList()
			},
            lodeList(){
				let params = {
					search_form:this.search_form,
					is_jc:this.is_jc
				}
				this.$post('/buyerSys/CodeTrack',params,res=>{
					this.list = res.data.data
				})
			},            
        }
    }
</script>
